<template>
  <div class="dashboard-container">
    <!-- default-active 默认那个高亮 -->
    <el-menu default-active="1" class="el-menu-vertical-demo">
      <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location" />
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu> -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu" />
          <span slot="title">导航一</span>
        </template>

        <el-submenu index="1.1">
          <template slot="title">
            <i class="el-icon-document" />
            <span slot="title">1.1</span>
          </template>
          <el-menu-item index="1.1.1">
            <i class="el-icon-document" />
            <span slot="title">1.1.1</span>
          </el-menu-item>
          <el-menu-item index="1.1.2">
            <i class="el-icon-document" />
            <span slot="title">1.1.2</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="1.2">
          <i class="el-icon-document" />
          <span slot="title">1.2</span>
        </el-menu-item>
        <el-menu-item index="1.3">
          <i class="el-icon-document" />
          <span slot="title">1.3</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item index="2" disabled>
        <i class="el-icon-document" />
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting" />
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>
    <svg-icon icon-class="email" color="orange" />
    <br>
    <svg-icon icon-class="table" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
